<template>
  <div v-if="hiddenDangerList.length > 0" class="hidden-danger-rectification">
    <div class="content-item-tittle">隐患整改</div>
    <div class="hidden-danger-rectification-content">
      <div class="hidden-danger-rectification-item">
        <div class="item-content-tittle">隐患年度积累</div>
        <div class="hidden-Echarts" id="lineEchartsHidden"></div>
      </div>
      <div class="hidden-danger-rectification-item">
        <div class="item-content-tittle">隐患年度热词</div>
        <div class="hidden-Echarts" id="hotWorldHidden"></div>
      </div>
      <div class="hidden-danger-rectification-item">
        <div class="item-content-tittle d-flex ai-center jc-between">
          <div>
            实时隐患
            <span class="day-inspection-item-text">
              {{
              hiddenDangerList.length
              }}
            </span>
          </div>
          <div class="switch-wrap d-flex ai-center">
            <div class="img-arrow-left d-flex ai-center jc-center" @click="switchImg(-1)">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="img-progress">{{ imgIndex + 1 }}/{{ hiddenDangerList.length }}</div>
            <div class="img-arrow-right d-flex ai-center jc-center" @click="switchImg(1)">
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div class="day-inspection-item-img">
          <el-carousel :interval="5000" arrow="never" ref="carousel" @change="imgChange">
            <el-carousel-item v-for="(item, index) in hiddenDangerList" :key="index">
              <img
                v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(item.picUrls.split(',')[0].split('.')[item.picUrls.split(',')[0].split('.').length - 1].toLowerCase())"
                :src="require('@/assets/images/video/video-detail.png')"
                style="width: 100%; height: 75%"
                @click="$imgViewer"
                :data-imgpreview="item.picUrls.split(',')"
                :data-imgpreviewindex="0"
              />
              <img
                v-else
                style="width: 100%; height: 75%"
                @click="$imgViewer"
                :src="item.picUrls.split(',')[0]"
                :data-imgpreview="item.picUrls.split(',')"
                :data-imgpreviewindex="0"
              />
              <div class="day-inspection-item-dec">
                <div class="day-inspection-status">
                  {{
                  item.status === 1
                  ? "整改中"
                  : item.status === 2
                  ? "已完成"
                  : item.status === 3
                  ? "核实中"
                  : "待指派"
                  }}
                </div>
                <div class="day-inspection-desc" :title="item.hiddenDangerDesc">{{ item.hiddenDangerDesc }}</div>
                <el-link class="day-inspection-link" type="primary" @click="jumpOtherPage(item.hiddenDangerDesc)">详情</el-link>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTopHotWord,
  getHiddenDangerList,
  getHiddenTimeAccumulate,
} from '@/api/home'
var Echarts = require('echarts/lib/echarts')
require('echarts-wordcloud')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/radar')
require('echarts/lib/component/tooltip')
export default {
  name: 'HiddenDangerRectification',
  props: {
    organizationId: {
      default() {
        return undefined
      },
    },
  },
  data() {
    return {
      imgIndex: 0,
      hiddenDangerList: [],
      hotWordList: [],
      hiddenDanger: [],
    }
  },
  mounted() {
    this.getLineEcharts(() => {
      this.getTopHotWord()
    })
  },
  methods: {
    // 更新/刷新模块
    refreshModel() {
      this.getLineEcharts()
    },
    getTopHotWord() {
      let that = this
      getTopHotWord({
        topN: 20,
        orgIds: this.organizationId || this.$store.state.userinfo.org.id,
        types: 1,
      }).then((res) => {
        if (res.status === 200) {
          res.data.forEach(function (item) {
            that.hotWordList.push({
              name: item.keyWord,
              value: Number(item.score),
            })
          })
          that.$nextTick(() => {
            that.initHotWorldEcharts()
          })
        }
        getHiddenTimeAccumulate({
          orgIds: this.organizationId || this.$store.state.userinfo.org.id,
          type: 2,
          timeQuantum: 3,
        }).then((res) => {
          if (res.status === 200) {
            let xAxisData = []
            let countList = []
            let faultCountList = []
            that.hiddenDanger = res.data.dataCountList
            for (let i = 0; i < res.data.dataCountList.length; i++) {
              xAxisData.push(res.data.dataCountList[i].dayTime)
              countList.push(res.data.dataCountList[i].count)
              faultCountList.push(res.data.dataCountList[i].faultCount)
            }
            that.$nextTick(() => {
              that.initLineEcharts(xAxisData, countList, faultCountList)
            })
          }
        })
      })
    },
    getLineEcharts(callback) {
      let that = this
      getHiddenDangerList({
        orgIds: this.organizationId || this.$store.state.userinfo.org.id,
        status: 4, // 实时
        queryType: 0,
      }).then((res) => {
        if (res.status === 200) {
          that.hiddenDangerList = res.data
          callback && callback()
        }
      })
    },
    jumpOtherPage(desc) {
      let params = {
        orgId: this.organizationId
          ? Number(this.organizationId)
          : this.$store.state.userinfo.organizationIds, // 单位编码
        // orgName: this.$store.state.userinfo.organizationName, // 单位名称
        desc: desc, // 搜索隐患描述
      }
      this.$router.push({
        name: 'hiddenDangerRectification',
        params,
      })
    },
    switchImg(num) {
      if (
        this.imgIndex + num >= 0 &&
        this.imgIndex + num < this.hiddenDangerList.length
      ) {
        this.imgIndex += num
        this.$refs.carousel.setActiveItem(this.imgIndex)
      }
    },
    imgChange(index) {
      // 记录图片index
      let that = this
      that.imgIndex = index
    },
    initLineEcharts(xAxisData, countList, faultCountList) {
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          textStyle: {
            color: '#031C4C',
            fontSize: 12,
          },
          y: 10,
          icon: 'circle',
          data: ['累积创建隐患', '累积处理隐患'],
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '5%',
          bottom: '1%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: '#999',
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          minInterval: 1,
          nameTextStyle: {
            color: '#999',
          },
          splitArea: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            //网格线
            show: false,
          },
        },
        series: [
          {
            name: '累积创建隐患',
            type: 'line',
            data: faultCountList,
            symbolSize: 3,
            color: '#F58080',
            lineStyle: {
              normal: {
                width: 1,
                color: '#FFB32D',
                shadowColor: 'rgba(245,128,128, 0.5)',
                shadowBlur: 10,
                shadowOffsetY: 7,
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: 'rgba(255,179,45,0.5)',
              },
            },
            itemStyle: {
              normal: {
                color: '#FFB32D',
                borderWidth: 10,
                borderColor: '#FFB32D',
              },
            },
            smooth: false,
          },
          {
            name: '累积处理隐患',
            type: 'line',
            data: countList,
            symbolSize: 3,
            color: '#47CFAD',
            lineStyle: {
              normal: {
                width: 1,
                color: '#47CFAD',
                shadowColor: 'rgba(245,128,128, 0.5)',
                shadowBlur: 10,
                shadowOffsetY: 7,
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: 'rgba(71,207,173,0.5)',
              },
            },
            itemStyle: {
              normal: {
                color: '#47CFAD',
                borderWidth: 10,
                borderColor: '#47CFAD',
              },
            },
            smooth: false,
          },
        ],
      }
      if (document.getElementById('lineEchartsHidden')) {
        this.$echarts
          .init(document.getElementById('lineEchartsHidden'))
          .setOption(option)
      }
    },
    initHotWorldEcharts() {
      let colorArr = [
        '#fb6873',
        '#fb547b',
        '#e750b7',
        '#7b50e7',
        '#507be7',
        '#50d7e7',
        '#5ee750',
        '#e7d350',
        '#e79750',
        '#e75050',
        '#ffa2a9',
        '#ffa2f5',
        '#b6a2ff',
        '#a2d2ff',
        '#a2ffba',
        '#feffa2',
        '#ffd2a2',
        '#f29b9b',
        '#ffc5a2',
        '#fac1fb',
        '#ba333d',
        '#ba3373',
        '#7933ba',
        '#338fba',
        '#33ba73',
        '#95ba33',
        '#ba9f33',
        '#ba7c33',
        '#ba5033',
        '#c8a9ac',
      ]
      let option = {
        tooltip: {
          show: true,
          formatter: function (params) {
            let html = `<p><span style="display:inline-block;width:5px;
                height:5px;border-radius:50%;background-color:${params.color};margin-right:5px;vertical-align:middle"></span>${params.name}：共出现${params.value}次</p>`
            return html
          },
        },
        series: [
          {
            type: 'wordCloud',
            gridSize: 16,
            sizeRange: [22, 50],
            rotationRange: [0, 0],
            shape: 'pentagon',
            textStyle: {
              normal: {
                color: function () {
                  return colorArr[Math.floor(Math.random() * colorArr.length)]
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333',
              },
            },
            data: this.hotWordList,
          },
        ],
      }
      if (document.getElementById('hotWorldHidden')) {
        Echarts.init(document.getElementById('hotWorldHidden')).setOption(
          option
        )
      }
    },
  },
}
</script>
<style lang="scss">
.hidden-danger-rectification {
  height: 360px;
  .hidden-danger-rectification-content {
    width: 100%;
    height: calc(100% - 51px);
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .item-content-tittle {
      padding-top: 15px !important;
      height: 50px;
    }
    .hidden-danger-rectification-item {
      float: left;
      width: calc(33.33% - 8px);
      height: 100%;
      border: 1px solid #e1e1e1;
      .day-inspection-item-tittle {
        padding: 10px;
        width: 100%;
        height: 10%;
        font-size: 20px;
        font-weight: 400;
        text-align: left;
        color: #8890ab;
      }
      .day-inspection-item-text {
        color: #ffb32d;
        margin-left: 10px;
      }
      .switch-wrap {
        margin: 0 10px;
        .img-arrow-right {
          cursor: pointer;
          width: 32px;
          height: 32px;
          border: 1px solid #f1f1f1;
          border-radius: 50%;
          .el-icon-arrow-right {
            font-size: 16px;
          }
        }
        .img-arrow-left {
          cursor: pointer;
          width: 32px;
          height: 32px;
          border: 1px solid #f1f1f1;
          border-radius: 50%;
          .el-icon-arrow-left {
            font-size: 16px;
          }
        }
        .img-progress {
          padding: 0 5px;
        }
      }
      .el-carousel__container {
        height: 100%;
      }
      .day-inspection-item-img {
        float: left;
        padding: 10px 20px 20px 20px;
        width: 100%;
        height: calc(100% - 40px);
        .el-carousel__indicators--horizontal {
          display: none;
        }
        .el-carousel--horizontal {
          height: 100%;
          overflow-y: hidden;
        }
      }
      .day-inspection-item-dec {
        float: left;
        padding: 10px 0;
        width: 100%;
        display: flex;
        align-items: center;
        .day-inspection-status {
          float: left;
          width: 55px;
          height: 30px;
          background: #ffb32d;
          border-radius: 4px;
          text-align: center;
          line-height: 30px;
          color: #ffffff;
        }
        .day-inspection-desc {
          margin-left: 10px;
          float: left;
          width: calc(100% - 100px);
          font-size: 14px;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          cursor: pointer;
        }
        .day-inspection-link {
          font-size: 14px;
          // margin-top: 23px;
        }
      }
      .hidden-Echarts {
        width: 100%;
        height: calc(100% - 71px);
      }
    }
  }
}
</style>
